<template>
  <el-container>
    <el-aside width="220px">
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :router="true">
        <div class="picture"><img class="logo" src="../assets/img/logo.png" alt=""></div>
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/book">
          <i class="el-icon-menu"></i>
          <span slot="title">图书管理</span>
        </el-menu-item>
        <el-menu-item index="/borrow">
          <i class="el-icon-document"></i>
          <span slot="title">借阅中心</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-setting"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
        <el-menu-item index="/system">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container style="min-height: 100vh;">
      <!-- 内容从这里开始 -->
      <el-header>
        <h1>图书管理系统首页</h1>
      </el-header>
      <el-main>
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="12">
            <el-input v-model="searchKeyword" placeholder="请输入图书名称、作者等信息" clearable @keyup.enter="searchBooks">
              <template #append>
                <el-button @click="searchBooks">搜索</el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button type="primary" @click="addBook">新增图书</el-button>
          </el-col>
        </el-row>
        <!-- 图书列表 -->
        <el-table :data="filteredBooks" stripe>
          <el-table-column prop="id" label="图书 ID"></el-table-column>
          <el-table-column prop="title" label="图书名称"></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="publishDate" label="出版日期"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" type="warning" @click="editBook(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteBook(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredBooks.length">
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      searchKeyword: '',
      // 模拟图书数据
      books: [
        { id: 1, title: '《Vue.js实战》', author: '梁灏', publishDate: '2018-08-01' },
        { id: 2, title: '《JavaScript高级程序设计》', author: 'Nicholas C. Zakas', publishDate: '2019-09-01' },
        { id: 3, title: '《Python数据分析实战》', author: '薛传艺', publishDate: '2020-06-01' }
      ],
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    filteredBooks() {
      if (!this.searchKeyword) {
        return this.books;
      }
      return this.books.filter(book => {
        return book.title.includes(this.searchKeyword) || book.author.includes(this.searchKeyword);
      });
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    searchBooks() {
      this.currentPage = 1;
    },
    addBook() {
      console.log('新增图书操作');
      // 这里可以添加打开新增图书弹窗的逻辑
    },
    editBook(book) {
      console.log('编辑图书：', book);
      // 这里可以添加打开编辑图书弹窗的逻辑
    },
    deleteBook(book) {
      this.$confirm('确定要删除该图书吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.books.findIndex(item => item.id === book.id);
        if (index!== -1) {
          this.books.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    }
  }
};
</script>

<style scoped>
@import '../assets/css/home.css';

.el-header {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

.el-main {
  padding: 20px;
}
</style>